<template>
  <view>
    <!-- #ifdef H5 -->
    <view class="my-tabbar">
      <view
          class="item"
          :class="{active: currentRoute === item.pagePath}"
          v-for="(item, index) in list"
          :key="index"
          @tap="to(item.pagePath)"
      >
        <image :src="`/${item.selectedIconPath}`"></image>
        <image :src="`/${item.iconPath}`"></image>
        <text>{{ item.text }}</text>
      </view>
    </view>
    <!-- #endif -->
  </view>
</template>

<script>
export default {
  data() {
    return {
      listMap: {
        1: {
          "pagePath": "pages/home/index",
          "iconPath": "static/icon-14.png",
          "selectedIconPath": "static/icon-13.png",
          "text": "首页"
        },
        2: {
          "pagePath": "pages/market/index",
          "iconPath": "static/icon-09.png",
          "selectedIconPath": "static/icon-08.png",
          "text": "寄售区"
        },
        3: {
          "pagePath": "pages/blindBox/index",
          "iconPath": "static/icon-04.png",
          "selectedIconPath": "static/icon-03.png",
          "text": "盲盒"
        },
        4: {
          "pagePath": "pages/my/index",
          "iconPath": "static/icon-12.png",
          "selectedIconPath": "static/icon-11.png",
          "text": "我的"
        }
      },
      list: [],
      currentRoute: ''
    }
  },
  onLoad() {
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      // 获取当前页面路径
      let curPage = getCurrentPages();
      this.currentRoute = curPage[curPage.length - 1].route;
      this.$http('api/newapi/buttonList', 'GET').then((res) => {
        this.list = res.map(item => this.listMap[item.id]).filter(item => !!item);
        uni.setStorageSync('tabbar_list', this.list);
      })
      // const list = uni.getStorageSync('tabbar_list');
      // if (list) {
      //   this.list = list;
      // } else {
      //   this.$http('api/newapi/buttonList', 'GET').then((res) => {
      //     this.list = res.map(item => this.listMap[item.id]).filter(item => !!item);
      //     uni.setStorageSync('tabbar_list', this.list);
      //   })
      // }
    },
    to(path) {
      uni.switchTab({
        url: `/${path}`
      });
    }
  }
}
</script>

<style lang="scss">
.my-tabbar {
  width: 100%;
  height: var(--window-bottom);
  border-top: 1px solid rgba(0, 0, 0, 0.33);
  position: fixed;
  left: 0;
  bottom: 0;
  background-color: #FFFFFF;
  z-index: 999;
  display: flex;
  .item {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    image {
      width: 20px;
      height: 20px;
    }
    & image:nth-child(2),
    &.active image:first-child {
      display: block;
    }
    & image:first-child,
    &.active image:nth-child(2) {
      display: none;
    }
    text{
      margin-top: 3px;
      font-size: 11px;
	  color: #979797;
    }
    &.active text{
      color: #1A4FFF;
    }
  }
}

</style>
